<template>
    <div class="ue_box">
        <div class="topUI">
            大黑汀水库
        </div>
        <button id="overlayButton"></button>
        <div ref="video" id="player"></div>
        <div class="webUi">
            <div class="flyToPoint btn" @click="flyToPoint()">
                漫游
            </div>
            <div class="setView btn" @click="showMapLayer('zylx')">
                转移路线
            </div>
            <div class="setView btn" @click="showMapLayer('hdm')">
                断面
            </div>
            <div class="setView btn" @click="showMapLayer('yhcl')">
                村庄
            </div>
            <div class="setView btn" @click="showMapLayer('danad')">
                危险区
            </div>
            <div class="setView btn" @click="downRain()">
                下雨
            </div>
            <div class="setView btn" @click="downSnow()">
                下雪
            </div>
            <div class="setView btn" @click="showMapLayer('sstq')">
                实时天气
            </div>
            <div class="setView btn" @click="showMapLayer('home')">
                Home
            </div>
        </div>
        
    </div>
</template>

<script>
import webrtc from "../ueUntil/webrtc.js";
export default {
    name: 'index',
    components: {},
    props: {},
    data() {
        return {
            isPlaying: false,
            isSnow: false,
            isRain: false,
            isCL: false,
            isZYLX: false,
            isWXQ: false,
            isDM: false,
            isSstq: false,
            isHome: false
        };
    },
    watch: {},
    computed: {},
    methods: {
        // 三维 video 初始化
        initUeVideo() {
            var htmlPlayer = document.getElementById("player");
            htmlPlayer.appendChild(webrtc.webRtcPlayer.video);
            webrtc.load('ws://192.168.2.154:8066');
            
        },
        //向三维发送前端数据
        flyToPoint () {
            var _this = this;
            _this.isPlaying =!_this.isPlaying
            // 'flyToPoint' 这个方法名字需要和三维引擎中保持一致，和三维开发沟通确定
            webrtc.api_send("flyToPoint", {
                "type": _this.isPlaying.toString()
            });
        },
        downSnow () {
            var _this = this;
            _this.isSnow =!_this.isSnow
            // 'flyToPoint' 这个方法名字需要和三维引擎中保持一致，和三维开发沟通确定
            webrtc.api_send("Snow", {
                "type": _this.isSnow.toString()
            });
        },
        downRain () {
            var _this = this;
            _this.isRain =!_this.isRain
            // 'flyToPoint' 这个方法名字需要和三维引擎中保持一致，和三维开发沟通确定
            webrtc.api_send("Rain", {
                "type": _this.isRain.toString()
            });
        },
        //向三维发送前端数据
		showMapLayer (id){
            // 'resetView' 这个方法名字需要和三维引擎中保持一致，和三维开发沟通确定
            var layerShow = false;
            if(id == 'hdm') {
                this.isDM = !this.isDM
                layerShow = this.isDM
            }else if(id =='yhcl') {
                this.isCL = !this.isCL
                layerShow = this.isCL
            }else if(id =='danad'){
                this.isWXQ = !this.isWXQ
                layerShow = this.isWXQ
            }else if(id =='sstq'){
                this.isSstq = !this.isSstq
                layerShow = this.isSstq
            }else if(id =='home'){
                this.isHome = !this.isHome
                layerShow = this.isHome
            }else{
                this.isZYLX = !this.isZYLX
                layerShow = this.isZYLX
            }
            webrtc.api_send("showMapLayer", {
                "layerId": id,
                "type": layerShow.toString()
            });
        },

        //接受三维发送过来的数据
		// {"on_success":true,"func_name":"responseTest","args":{"paream1":"参数1","paream2":"参数2","paream3":"参数3"}}
		myHandleResponseFunction (data) {
            console.log('收到的事件: ' + data);
            const jsonObject = typeof data === 'object' ? JSON.parse(JSON.stringify(data)) : JSON.parse(data)
            if (!jsonObject.on_success) return
            switch (jsonObject.func_name) { //这个 func_name 需要和三维开发沟通，保持一致
                case "responseTest":
                    // 测试事件 do Something
                    console.log('这是ue发给前端的args参数', JSON.stringify(jsonObject.args))
                    break;

                case "OnPathClick":
                    // 点击路径 do Something
                    break;

                //更多func_name类型 回调通知, 详见各API事件
            }
            return data;
        }
    },
    created() { },
    mounted() { 
        this.$nextTick(() => {
            this.initUeVideo()
            //监听三维向vue前端传参
            webrtc.addResponseEventListener('ueToJsMsgFunName', this.myHandleResponseFunction)
        })
    }
};
</script>
<style lang="scss" scoped>
.ue_box,
#player {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ue_box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#streamingVideo {
    position: absolute;
    top: 0;
    left: 0;
}
.topUI{
    width: 100%;
    height: 150px;
    background-image: url('src/assets/top.png');
    background-size: 100% 100%;
    position: absolute;
    top: -10px;
    text-align: center;
    line-height: 76px;
    color: white;
    font-size: 30px;
    z-index: 9;
}
.webUi {
    width: 50%;
    height: 50px;
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 10px;
    .btn{
        background-image: url('src/assets/Default.png');
        background-size: 100% 100%;
        cursor: pointer;
        margin: 0 auto;
        width: 118px;
        height: 30px;
        text-align: center;
        // background: #4b708e;
        color: white;
        line-height: 30px;
        border-radius: 5px;
    }
}
.flyToPoint {

    
}

.setView {
    
}
</style>
